<template>
    <div class="content">
        <h1 class="top">{{title}}</h1>
        <el-row class="tac">
            <el-col :span="8">
                <Nav></Nav>
            </el-col>

            <el-col :span="16">
                <div ref="main">
                    <!-- 指定组件的呈现位置 -->
                    <!-- keep-alive：不销毁包裹的组件（如果指定了include属性，仅仅保留include中的组件，include中写组件名） -->
                    <keep-alive :include="needCachedComponentNames">
                        <transition :name="transitionName">
                            <router-view/>
                        </transition>
                    </keep-alive>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Nav from '@/components/Nav'
export default {
    name: "Home",
    data() {
        return {
            title: "QuickSand",
            // 需要缓存的组件名（组件切换后该组件不被销毁），需要使用keep-alive包裹，其include属性使用
            needCachedComponentNames: ['SystemConfig'],

            // 路由过渡特效
            transitionName : '',
        }
    },
    components: { Nav },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
    },
    computed: {},
    mounted() {
    },
    beforeDestroy() {
    },
    watch: {
        // 路由动画特效
        '$route'(to, from) {
            const toDepth = to.path.split('/').length
            const fromDepth = from.path.split('/').length
            this.transitionName  = toDepth < fromDepth ? 'slide-fade' : 'slide-fade'
        }
    },
   
}
</script>

<style scoped>
.content {
    height: 100%;
}
.top {
    text-align:left;
}

/* 路由过渡效果 */
.slide-fade-enter-active {
  transition: all 0.8s ease-in-out;
}
.slide-fade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}

</style>